iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
自我挑戰組

從新手開始TypeScript系列 第 18

Day18-TypeScript(TS)的類別(Class)繼承(Inheritance)

  • 分享至 

  • xImage
  •  

今天要來帶大家看看TypeScript(TS)的類別(Class)繼承(Inheritance)範例,
那麼我們直接來看程式碼吧。

首先,建立一個類別

class Employee {
    constructor(private empId: number, private empName: string) { }
    showInfo() {
        return this.empId + "-" + this.empName;
    };
}

這邊與*Day14-TypeScript(TS)使用成員存取修飾詞(Access Modifier)*的使用方式二,
範例相同,
若是不理解的可以回去看看喔,
這邊我就不再贅述了。

接這要繼承Employee類別範例如下,

class Sales extends Employee {
    constructor(empId: number, empName: string, public bonus?: number) {
        super(empId, empName);
        this.bonus = 1000;
    }
}

範例程式碼宣告一個Sales類別
使用extends關鍵字來繼承Employee類別
並在建構函式(constructor)中呼叫super()
用來呼叫父類別的建構函式程式,
這邊特別需要注意的是
重複的成員不要寫存取方式
因此在Sales類別的建構函式成員中,
只有bonus前方有加上成員存取修飾詞*(Day15-TypeScript(TS)的存取子(Accessors))*,
bonus後方的 ?則為選擇性屬性 (Day12-TypeScript(TS)的選擇性屬性(Optional Properties))

最後式使用方式,

let emp1 = new Employee(1, "Mary");
console.log(emp1.showInfo());

let s1 = new Sales(2, "Sam");
console.log(s1.showInfo());
console.log(s1.bonus);

父類別與子類別的使用方式並無不同,
就是一般的類別使用方式。

今日結語

今天帶範例也帶出了之前有學到的東西,
若是看不明白的話也可以到上面標記的篇章回去複習喔,
加油加油喔。


上一篇
Day17-TypeScript(TS)的繼承(Inheritance)
下一篇
Day19-JavaScript(JS)與TypeScript(TS)的函式(Function) Part1
系列文
從新手開始TypeScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言